$def with (dev)

<!-- FLOT - javascript charts -->
<script language="javascript" type="text/javascript" src="/static/js/flot/jquery.flot.js"></script>
<script language="javascript" type="text/javascript" src="/static/js/flot/jquery.flot.time.js"></script>

<h3>Basic info:</h3>
<table style="width:100%"class="ui-widget ui-widget-content">
<tr class="ui-widget-header"><td>Property</td><td>Value</td></tr>
<tr><td>Name</td><td>$dev.get_name()</td></tr>
<tr><td>Description</td><td>$dev.get_desc()</td></tr>
<tr><td>Created</td><td>$dev.get_create_date()</td></tr>
<tr><td>Location</td><td>$dev.get_location()</td></tr>
<tr><td>Role</td><td>$dev.get_role()</td></tr>
</table>

<h3>Endpoints:</h3>
$if len(dev.get_endpoints()) != 0:
	<table style="width:100%"class="ui-widget ui-widget-content">
	<tr class="ui-widget-header">
		<td>Id</td>
		<td>Name</td>
		<td>Description</td>
		<td>Addresses</td>
	</tr>
	$for ep in dev.get_endpoints():
		<tr>
		<td>$ep.get_id()</td>
		<td>$ep.get_name()</td>
		<td>$ep.get_desc()</td>
		<td>
		$for addr in ep.get_addresses():
			$addr;
		</td>
		</tr>
	</table>

<h3>Capabilities:</h3>
<table style="width:100%"class="ui-widget ui-widget-content">
	<tr class="ui-widget-header">
		<td>Id</td>
		<td>Name</td>
		<td>Description</td>
		<td>Unit</td>
		<td>Symbol</td>
		<td>DataType</td>
	</tr>
$for cap in dev.query_capabilities():
	<tr><td>$cap.cap_id</td><td>$cap.cap_name</td><td>$cap.cap_desc</td><td>$cap.unit_name</td><td>$cap.unit_symbol</td><td>$cap.data_type_name</td></tr>
</table>

<!-- REQUESTS -->
<h3>Requests:</h3>
<table style="width:100%"class="ui-widget ui-widget-content">
	<tr class="ui-widget-header">
		<td>Id</td>
		<td>Name</td>
		<td>Description</td>
		<td>Params format</td>
		<td>Params description</td>
		<td>Has response</td>
		<td>Response</td>
	</tr>
$for req in dev.query_requests():
	<tr>
	<td>$req.request_id</td>
	<td>$req.request_name</td>
	<td>$req.request_desc</td>
	$if req.params_format is not None: 
		<td>$req.params_format</td>
		<td>$req.params_desc</td>
	$else:
		<td>N/A</td>
		<td>N/A</td>
	$if req.has_response != 0:
		<td>Yes</td>
		<td>$req.response_desc</td>
	$else:
		<td>No</td>
		<td>N/A</td>
	</tr>
</table>


<!-- CAPABILITIES CHARTS AND HISTORY -->
$for cap in dev.query_capabilities():
	<h3>$cap.cap_name.title() ($cap.cap_desc.lower())<h3>
	<div id="plot-$cap.cap_id" class="ui-widget-content" style="height:400px;"></div>

<h3>History:</h3>
<table style="width:100%"class="ui-widget ui-widget-content">
	<tr class="ui-widget-header">
		<td>Id</td>
		<td>Name</td>
		<td>Unit</td>
		<td>Time</td>
		<td>Value</td>
	</tr>

$for cap in dev.query_history_caps(conditions=["time >= date('now','-1 day')"]):
	<tr><td>$cap.cap_id</td><td>$cap.cap_name</td><td>$cap.unit_name</td><td>$cap.time</td><td>$cap.value</td></tr>
</table>

<!-- FLOT CHART SCRIPT -->
$for cap in dev.query_capabilities():
	<script>
		var data = [
			$for el in dev.query_history_caps(conditions=["time >= date('now','-25 day')","cap_id=(%s)" % cap.cap_id],select="strftime('%s',time) as unixtime,value"):				
				$# PIR special treatment
				$if cap.cap_id == 2:
					$if el.value == 0:
						[$(el.unixtime)000, 1],
					$elif el.value == 1:
						[$(el.unixtime)000, 0],
					
				[$(el.unixtime)000, $(el.value)],				
		];
		
		var plot_settings = {
			series: {
				lines: { show: true, $("fill: true" if cap.cap_id == 2 else "")},
				points: { show: true},
			},
			xaxis: {
				mode: "time",
				ticks: 20
			},
			yaxis: {
				ticks: 10,
				tickDecimals: 1
			},
			grid: {
				backgroundColor: { colors: [ "#000", "#444" ] },
				borderWidth: {
					top: 1,
					right: 1,
					bottom: 2,
					left: 2
				}
			}
		};
		
		$# PIR special settings
		$if cap.cap_id == 2:
			plot_settings["yaxis"].ticks=0;
		
		$$.plot("#plot-$cap.cap_id", [
			{ label: "$cap.cap_name", data: data },
		], plot_settings );		
	</script>
